<template>
	<view class="container" :style="{height: `${getSystemInfo.navBarHeight}px`,background:backgroundColor}">
		<!-- 自定义顶部栏 -->
		<view class="nav-bar"
			:style="{
				height: `${getSystemInfo.menuHeight}px`,
				minHeight: `${getSystemInfo.menuHeight}px`,
				lineHeight: `${getSystemInfo.menuHeight}px`,
				left:`${getSystemInfo.menuRight}px`,
				top: `${getSystemInfo.menuTop}px`,
				background:backgroundColor
			}"
		>
		<slot></slot>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		name:"navigation-bar",
		props: {
			backgroundColor: {
				type: String,
				default: '#fff'
			},
		},
		data() {
			return {
				
			};
		},
		computed: {
			...mapGetters('global', ['getSystemInfo'])
		},
	}
</script>

<style lang="scss" scoped>
.container{
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	background-color: #fff;
	z-index: 999999;
	// margin-bottom: 20px;
}
.nav-bar{
	font-size: 14px;
	background: #fff;
	position: absolute;
}
</style>